<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详细</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/商品详细.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head>
<body>
    <header><p> <a href="#" class="iot_back"><span class="iot fa fa-angle-left"></span>商品详细</p></a></header>
<main>
    <!-- 商品图部分 -->
    <div class="iot_img">
        <ul>
        </ul>
  </div>
<!-- 价格部分 -->
  <div class="iot_price">
      
  </div>

<!-- 商品部分 -->
  <div class="iot_good">
     
  </div>

<!-- 商品详细 -->
  <div class="iot_details">
      <div class="iot_detailstitle">详情</div>
       <div class="iot_detailsall">
       </div>
  </div>

</main>

<!-- 底部 -->
     <footer>
        <div class="iot_footerimgs">
           <div><img src="../images/shoplight.png" alt=""></img><span>收藏</span></div>
           <div><img src="../images/wang.png" alt=""></img><span>客服</span></div>
           <div><img src="../images/cart.png" alt=""></img><span>购物车</span></div>
        </div>
        <div class="iot_footerbuttons">
            <button>加入购物车</button>
            <button>立即购买</button>
        </div>
     </footer>
</body>
</html>
<script src="../js/商品详细.js"></script>
<!-- <script>
    const carouselContainer = document.querySelector('.iot_img');
    const carouselList = document.querySelector('ul');

let position = 0; // 当前显示图片的位置

// 左滑事件
function slideLeft() {
  position = (position + 1) % carouselList.children.length;
  carouselList.style.transform = `translateX(-${position * carouselContainer.offsetWidth}px)`;
}

// 右滑事件
function slideRight() {
  position = Math.abs((position - 1 + carouselList.children.length) % carouselList.children.length);
  carouselList.style.transform = `translateX(-${position * carouselContainer.offsetWidth}px)`;
}

// 自动轮播
setInterval(slideLeft, 3000);

// 添加滑动事件监听器
carouselContainer.addEventListener('swipeleft', slideLeft);
carouselContainer.addEventListener('swiperight', slideRight);
</script> -->